<template>
  <div class="home-container">
    <h3>Home 组件</h3>

    <hr />

    <button @click="gotoLK">通过push跳转到 "洛基"</button>
    <button @click="gotoLK2">通过replace跳转到 "洛基"</button>
    <router-link to="/main">访问后台主页</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoLK() {
      //通过编程式导航API，导航跳转到指定页面
      //this.$router.push('hash地址')会增加一条历史记录
      this.$router.push('/movie/1');
    },
    gotoLK2() {
      //this.$router.push('hash地址')直接替换掉当前的历史记录
      this.$router.replace('/movie/1');
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  min-height: 200px;
  background-color: pink;
  padding: 15px;
}
</style>
